import { FN } from "@Tea/model";
import { ElButton, ElInput,ElOption,ElCheckbox, buttonProps, inputProps,ElSelect } from "element-plus";
import { Ref, isRef } from "vue";
export type SelectOptionType = { label: string, value: string | number }
export type ConditionItemType<T extends object = any> = {
  type: 'text',
  vModel: T
  feild: T extends Ref ? 'value' : keyof T,
  col?: number,
  label?: string,
  labelWidth?: string | number,
  attr: InputAttrType
}| {
  type: 'select',
  vModel: T
  feild: T extends Ref ? 'value' : keyof T,
  col?: number,
  label?: string,
  labelWidth?: string | number,
  attr: SelectAttrType,
  option: SelectOptionType[] | Ref<SelectOptionType[]>
}

interface BaseElFormItemType{

}

export type ElementType = 'text' | 'button' | 'checkbox'

export type ButtonAttrType = {
  onClick: (...args: any) => any,
}

export type InputAttrType = {
  placeholder?: string,
  onClear?: FN
  onKeydown?: FN
}
export type InputElType<T extends object = {}> = {
  type: 'text',
  vModel: T
  feild: T extends Ref ? 'value' : keyof T,
  attr?: InputAttrType,
}

export type SelectAttrType = {
  placeholder?: string,
  onClear?: FN,
  onChange?: FN
}
export type SelctElType<T extends object = {}> = {
  type: 'select',
  vModel: T
  feild: T extends Ref ? 'value' : keyof T,
  attr?: SelectAttrType,
  option: SelectOptionType[] | Ref<SelectOptionType[]>
}

export type ToolsItemType<T extends {} = any> = {
  type: 'button',
  content: string | Ref<string>,
  attr?: ButtonAttrType,
  disabled?: boolean | Ref<boolean>
} | CheckboxElType<T>

export type CheckboxAttrType = {
  onChange: FN,
  'true-label': string | number,
  'false-label': string | number
}
export type CheckboxElType<T extends {}> = {
  type: 'checkbox',
  optionLabel: string | Ref<string>,
  vModel: T
  feild: T extends Ref ? 'value' : keyof T,
  attr?: CheckboxAttrType,
}

export type SlotType = {
  type: "slot",
  VNode: () => JSX.Element
}

export type ElementFromItemType<T extends object> = InputElType<T>| SelctElType<T> | ToolsItemType<T> | SlotType
  
export const renderElement = function <T extends object>(item: ElementFromItemType<T>) {
  
  switch (item.type) {
    case "button":
      return (
        <ElButton
          {...{
            type: "primary",
            disabled:isRef(item.disabled) ? item.disabled.value : item.disabled,
            ...item.attr
          }}>{isRef(item.content) ? item.content.value : item.content}
        </ElButton>
      )
    case 'slot':
      return item.VNode()
    case 'text':
      return (
        <ElInput
          v-model={item.vModel[item.feild as string]}
          clearable
          {
            ...(item.attr || {})
          }
        >
        </ElInput>
      )
    case 'checkbox':
      return (
        <ElCheckbox
          style={{marginLeft:"10px"}}
          label={isRef(item.optionLabel) ? item.optionLabel.value : item.optionLabel}
          v-model={item.vModel[item.feild as string]}
          {
            ...(item.attr || {})
          }
        >

        </ElCheckbox>
      )
    case "select":
      return (
        <ElSelect
          v-model={item.vModel[item.feild as string]}
          clearable
          {...item.attr}
        >
          {
            (isRef(item.option) ? item.option.value : item.option).map(o => (
              <ElOption
                key={o.value}
                label={o.label}
                value={o.value}
              >
              </ElOption>
            ))
          }
        </ElSelect>
      )
  }
}